<template>
	<view class="dynamiPage">
		<view class="bottomline"></view>
		<view class="dynamiContent">
			<view class="dynamiBox">
				<view class="dynamiItem">
					<view class="dynamiItemTop">
						<view class="flexItemMain">
							<image @tap="chat" class="flexItemLeftImg" :src="details.avatar" mode=""></image>
							<view class="flexItemCenter">
								<view class="flexItemCenterTop">{{details.nickname}}</view>
								<view class="flexItemCenterBottom" v-if="details.sex==2">
									<image class="sexImg" src="../../static/dongtai/sex.png"></image>
									{{details.age}}
								</view>
								<view class="flexItemCenterBottom2" v-if="details.sex==1">
									<image class="sexImg" src="../../static/pages/sex.png"></image>
									{{details.age}}
								</view>
							</view>
						</view>
					</view>
					<view class="dynamiItemContent">
						{{details.content}}
					</view>
					<view class="dynamiItemImgBox">
						<image class="ctImg" @click="checkPic(ite,details.image)" v-for="(ite,i) in details.image"
							:key="i" :src="ite" mode="aspectFill"></image>
					</view>
					<view class="dynamiItemImgTime">
						{{details.created_at}}
					</view>
					<view class="dynamiItemImgBottom">
						<image class="dianzanImg" @click="zan(details,1)" v-if="details.is_user_give==1"
							src="../../static/dongtai/xin2.png"></image>
						<image class="dianzanImg" @click="zan(details,0)" v-else src="../../static/dongtai/xin.png">
						</image>
						<!-- <view class="dianzan" v-if="details.is_user_give==0">点赞</view>
						<view class="dianzan" v-else>{{details.give_sum}}</view> -->
						<view class="dianzan">{{details.give_sum}}</view>
						<image class="more" @click="toMore(details)" src="../../static/dongtai/more.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="pinglunTitle">所有评论({{details.comment_sum}})</view>
		<block v-if="details.comment_sum>0"></block>
		<view class="pinglunBox" v-for="(ite,i) in details.comment" :key="i">
			<view class="flexItemMain ">
				<image class="flexItemLeftImg1" :src="ite.user_avatar[0]" mode=""></image>
				<view class="flexItemCenter">
					<view class="flexItemCenterTop1">{{ite.user_nickname}}</view>
					<view class="flexItemCenterBottom1">{{ite.created_at}}</view>
				</view>
				<!-- <image src="../../static/logo.png" class="flexItemRightImg" mode=""></image> -->
				<image class="flexItemRightImg" @click="zan1(ite,1)" v-if="ite.is_dynamic_comment_give==1"
					src="../../static/dongtai/xin2.png"></image>
				<image class="flexItemRightImg" @click="zan1(ite,0)" v-else src="../../static/dongtai/xin.png"></image>
			</view>
			<view class="pingluncotent">
				{{ite.content}}
			</view>

		</view>
		<view class="nomore">
			<view class="nomoreleft"></view>
			<view class="nomoreMiddle">没有更多了</view>
			<view class="nomoreright"></view>
		</view>
		<view class="pinglunInputBox" v-if="showInput">
			<input class="uni-input" v-model="content" :focus="focus" @focus="changeFocus" placeholder="请输入评论内容" />
			<!-- <image class="fabupinglunBtn" src="../../static/pages/issue.png" @click="submit(details)"></image> -->
			<view class="fabupinglunBtn" @click="submit(details)">
				发送
			</view>
			<!-- <formTexterea :isVisible.sync='isVisible'  @onConfirm='onConfirm'></formTexterea> -->
		</view>
	</view>
</template>

<script>
	import formTexterea from '../../components/form-textarea/index.vue'
	export default {
		components: {
			formTexterea: formTexterea
		},
		data() {
			return {
				focus: false,
				id: '',
				details: {
					avatar: []
				},
				content: '',
				hf_user_id: '',
				isVisible: false,
				showInput: true
				// page: 1,
				// canPagejia: true,
				// canPullDownRefresh: false
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getData(option.id)
		},
		onShow() {
			this.showInput = true
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.canPagejia = true
			this.details = {}
			this.page = 1
			this.canPullDownRefresh = true
			this.getData()
		},
		// onReachBottom() { //与methods 同级
		// 	// console.log(1)
		// 	if (this.canPagejia) {
		// 		this.page = this.page + 1
		// 		this.getData()
		// 	}
		// },
		methods: {
			chat() {
				this.$checkIsVip().then(res => {
					if (res) {
						this.toChat()
					} else {
						uni.showModal({
							content: "开通会员即可私聊",
							cancelText: "取消",
							confirmText: "去开通",
							success: res => {
								if (res.confirm) {
									uni.navigateTo({
										url: "vipCenter/vipCenter"
									})
								}
							}
						})
					}
				})
			},
			toChat() {
				this.$store.commit('createConversationActive', {
					type: "C2C",
					data: this.details.user_id
				})
				this.details.userID = this.details.user_id;
				uni.setStorageSync('chooseUser', this.details);
				uni.navigateTo({
					url: '/pages/tim/room'
				})
			},
			toMore(list) {
				this.showInput = false
				// console.log('点击', list)
				let that = this
				uni.showActionSheet({
					itemList: ['举报'],
					success: function(res) {
						that.jubao(list)
					},
					fail: function(res) {
						// console.log(res.errMsg);
					}
				});
			},
			jubao(list) {
				// console.log('举报', list)
				uni.navigateTo({
					url: '/pages/my/report?id=' + list.user_id + '&nickname=' + list.nickname + '&avatar=' + JSON
						.stringify(list.avatar),
					success(res) {

						// console.log("举报")
					}
				})

			},
			changeFocus(e) {
				// console.log(e)
			},
			onConfirm(value) {
				// console.log(value);
			},
			submit(e) {
				let that = this
				let paramData = {
					dynamic_id: e.id,
					content: this.content,
					hf_user_id: this.hf_user_id
				}
				this.$utils.postrequest("/api/dynamic/comment/add", paramData, function(res) {
					if (res.code == 200) {
						that.content = ''
						that.getData(that.id)
					}
				})
			},
			checkPic(pic, picList) {
				uni.previewImage({
					count: pic,
					urls: picList
				})
			},
			zan(e, type) {
				let that = this
				let paramData = {
					id: e.id
				}
				this.$utils.postrequest("/api/dynamic/give", paramData, function(res) {
					if (res.code == 200) {
						if (type == 1) {
							that.details.give_sum = that.details.give_sum - 1
							that.details.is_user_give = 0
						} else {
							that.details.give_sum = that.details.give_sum + 1
							that.details.is_user_give = 1
						}
					}
				})
			},
			zan1(e, type) {
				let that = this
				let paramData = {
					id: e.id
				}
				this.$utils.postrequest("/api/dynamic/comment/give", paramData, function(res) {
					if (res.code == 200) {
						that.getData(that.id);
					}
				})
			},
			getData(id = 4) {
				let that = this

				that.$utils.request("/api/dynamic/details?id=" + id, {}, function(res) {

					if (res.code == 200) {
						res.data.image = JSON.parse(res.data.image)
						res.data.avatar = JSON.parse(res.data.avatar)
						if (res.data.comment.length > 0) {
							res.data.comment.forEach((i) => {
								i.user_avatar = JSON.parse(i.user_avatar)
							})
						} else {
							// console.log(2222)
							that.canPagejia = false
						}
						if (that.canPullDownRefresh) {
							uni.stopPullDownRefresh(); //停止下拉刷新动画
						}
						that.details = res.data
						if (that.details.avatar && that.details.avatar.length) that.details.avatar = that.details
							.avatar.shift()
					}
				})
			}
		}
	}
</script>

<style scoped>
	page {
		width: 100%;
		height: 100%;
		background: #fff;
	}

	.dynamiPage {
		width: 100%;
		height: 100%;
		background: #fff;
	}

	.pinglunTitle {
		font-size: 26rpx;

		color: #AAB0B6;
		padding-left: 32rpx;
		padding-bottom: 24rpx;
		border-bottom: 1rpx solid #DCDCDC;
		margin-bottom: 41rpx;
	}

	.nomore {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
	}

	.nomoreMiddle {
		font-size: 22rpx;
		font-family: PingFang SC;

		color: #C7C8DB;

	}

	.nomoreleft {
		width: 37rpx;
		height: 1rpx;
		background: #DCDDF3;
		margin-right: 18rpx;
	}

	.nomoreright {
		width: 37rpx;
		height: 1rpx;
		background: #DCDDF3;
		margin-left: 18rpx;
	}

	.headerCommon {
		padding-top: 100rpx;
		width: 100%;
		position: relative;
	}

	.bottomline {
		width: 100%;
		height: 2rpx;
		background: #E0E0E0;
		margin-top: 10rpx;
		margin-bottom: 43rpx;
	}

	.dynamiItemContent {
		margin: 32rpx 32rpx 16rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #171524;
	}

	.dynamiItemImgBox {
		display: grid;
		grid-template-columns: repeat(2, auto);
		/* margin-left: 31rpx;
		margin-right: 31rpx; */
		margin-bottom: 26rpx;
		grid-column-gap: 10rpx;
		grid-row-gap: 10rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.ctImg {
		width: 100%;
		height: 460rpx;
	}

	.dynamiItemImgTime {
		margin-left: 34rpx;
		margin-bottom: 33rpx;
		font-size: 24rpx;

		color: #AAB0B6;
	}

	/*    dianzanImg  more */
	.dynamiItemImgBottom {
		display: flex;
		align-items: center;
		margin-bottom: 28rpx;
	}

	.more {
		flex: none;
		width: 39rpx;
		height: 25rpx;
		margin-right: 37rpx;
	}

	.dianzan {
		flex: auto;
		font-size: 26rpx;

		color: #AAB0B6;
		margin-right: 53rpx;
	}

	.xinxiImg {
		flex: none;
		width: 43rpx;
		height: 43rpx;
		margin-right: 11rpx;
	}

	.xinxi {
		flex: auto;
		font-size: 26rpx;

		color: #AAB0B6;
	}

	.dianzanImg {
		width: 44rpx;
		height: 44rpx;
		margin-left: 30rpx;
		margin-right: 10rpx;
	}

	.guanzhutuijian {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.guanzhuText {
		margin-right: 35rpx;
		font-size: 30rpx;

		color: #282633;
	}

	.curguanzhuText {
		font-size: 33rpx;
		font-weight: bold;
		font-family: PingFang SC;
	}

	.fabu {
		position: absolute;
		right: 31rpx;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 30rpx;
		color: #775EEE;
	}

	.fabuImg {
		width: 46rpx;
		height: 46rpx;
		margin-right: 8rpx;
	}

	.flexItemMain {
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.flexItemLeft {
		flex: none;
		border-radius: 100%;
		overflow: hidden;
		width: 60rpx;
		height: 60rpx;
		margin-left: 30rpx;
		margin-right: 20rpx;
	}

	.flexItemLeftImg {
		border-radius: 100%;
		flex: none;
		width: 115rpx;
		height: 115rpx;
		margin-left: 31rpx;
		margin-right: 11rpx;
	}

	.flexItemLeftImg1 {
		border-radius: 100%;
		flex: none;
		width: 62rpx;
		height: 63rpx;
		margin-left: 31rpx;
		margin-right: 11rpx;
	}

	.flexItemLeft image {
		width: 100%;
		height: 100%;
	}

	.flexItemCenter {
		flex: auto;
		text-align: left;
	}

	.flexItemCenterTop {
		font-size: 28rpx;
		color: #100E1C;

	}

	.flexItemCenterTop1 {
		font-size: 24rpx;
		font-family: PingFang SC;

		color: #141222;
		margin-bottom: 8rpx;
	}

	.flexItemCenterBottom {
		color: #fff;
		font-size: 14rpx;
		/* width: 64rpx; */
		display: inline-block;
		padding-right: 16rpx;
		height: 33rpx;
		background: linear-gradient(-86deg, #FF8AB4, #FD73A3);
		border-radius: 17rpx;

	}

	.flexItemCenterBottom1 {
		font-size: 18rpx;
		font-family: PingFang SC;

		color: #9CA2A6;

	}

	.flexItemCenterBottom2 {
		color: #fff;
		font-size: 14rpx;
		/* width: 64rpx; */
		display: inline-block;
		padding-right: 16rpx;
		height: 33rpx;
		background: linear-gradient(-90deg, #5FCAFF, #5B8DFE);
		border-radius: 17rpx;

	}

	.sexImg {
		width: 16rpx;
		height: 16rpx;
		margin-left: 12rpx;
		margin-right: 4rpx;
	}

	.flexrow {
		display: flex;
		align-items: center;
	}

	.flexItemRight {
		flex: none;
		font-weight: bold;
		font-size: 14rpx;
	}

	.flexItemRightImg {
		width: 42rpx;
		height: 42rpx;
		flex: none;
		margin-right: 54rpx;
	}

	.pingluncotent {
		margin-left: 116rpx;
		margin-top: 41rpx;
		padding-bottom: 48rpx;
		border-bottom: 1rpx solid #DCDCDC;
	}

	.flexItemRight:last-child {
		margin-right: 30rpx;
	}

	.flexItemXian {
		margin-right: 30rpx;
		margin-left: 30rpx;
		height: 1rpx;
		background-color: #DCDCDC;
	}

	.pinglunInputBox {
		position: fixed;
		bottom: 0;
		z-index: 99999;
		background-color: #F4F4F4;
		width: 100%;
		display: flex;
		align-items: center;
		/* padding-top: 18rpx;/* */
		/* padding-bottom: 18rpx; */
		padding: 18rpx 30rpx;
		box-sizing: border-box;
	}

	.uni-input {
		flex: auto;
		margin-left: 33rpx;
	}

	.fabupinglunBtn {
		/* margin-right: 31rpx; */
		flex: none;
		width: 133rpx;
		height: 68rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #56C4FC;
		border-radius: 50rpx;
		color: white;
	}
</style>
